How To Add CSS

« Previous Next »

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External CSS

Internal CSS

Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Example

External styles are defined within the element, inside the section of an HTML page:

        
          <!DOCTYPE html>
          <html>
          <head> 
          <link> rel="stylesheet" href="mystyle.css"> 
          </head> 
          <body> 
      
          <h1> ACADEMY OF INFORMATION TECHNOLOGY This is a heading</h1>
          <p> ACADEMY OF INFORMATION TECHNOLOGY This is a paragraph.</p>

      
          </body>
          </html>

Result


    ACADEMY OF INFORMATION TECHNOLOGY 
     ACADEMY OF INFORMATION TECHNOLOGY

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"

In this example all HTML elements with class="center" will be red and center-aligned:

        
            .body {
                background-color:: lightblue;
                color:: red;
                 }
                 h1  {
                    color: : navy;
                    margin-left:: 20px;
                     }

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style>element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

        
            <!DOCTYPE html>
            <html>
            <head> 
            <style> 
        
            body {
                background-color: linen;
              }
              
              h1 {
                color: maroon;
                margin-left: 40px;
              }
            
            <h1> ACADEMY OF INFORMATION TECHNOLOGY </h1>
            <p> ACADEMY OF INFORMATION TECHNOLOGY </p>
  
        
            </body>
            </html>

Result:


        ACADEMY OF INFORMATION TECHNOLOGY 
    ACADEMY OF INFORMATION TECHNOLOGY